<template>
  <div class="mod-fri">
    <div class="container" v-if="isLogin">
      <div class="mod-fri-l">
        <div class="mod-fri-l-hd">
          <h2 class="mod-fri-l-txt">动态</h2>
          <span class="mod-fri-share" @click="editEvent">
            <i class="iconfont">&#xe654;</i>
            发动态
          </span>
        </div>
        <ul class="mod-fri-infinite-list">
          <li
            v-for="item in event"
            :key="item.id"
            class="mod-fri-infinite-list-item"
          >
            <event @reloadEvent="reloadEvent" :item="item"></event>
          </li>
          <p class="event-loading-box">
            <span class="event-loading" v-if="loading">
              <i class="iconfont">&#xe610;</i>
              加载中...
            </span>
          </p>
        </ul>
      </div>
      <div class="mod-fri-r">
        <div class="mod-fri-pro">
          <div class="mod-fri-pro-hd">
            <div class="mod-fri-pro-hd-left">
              <a href="javascript:;" @click="clickUser(user.userId)">
                <img
                  :src="user.avatarUrl"
                  :alt="user.nickname"
                  class="mod-fri-pro-hd-pic"
                />
              </a>
            </div>
            <div class="mod-fri-pro-hd-main">
              <h4 class="mod-fri-pro-hd-name">
                <a href="javascript:;" @click="clickUser(user.userId)">
                  {{ user.nickname }}
                </a>
              </h4>
              <p class="mod-fri-pro-hd-sign" v-if="showSignature">
                {{ user.signature }}
              </p>
            </div>
          </div>
          <ul class="user-info">
            <li class="user-info-item">
              <a href="javascript:;" @click="clickEvent(user.userId)">
                <strong>{{ user.eventCount }}</strong>
                <span>动态</span>
              </a>
            </li>
            <li class="user-info-item">
              <a href="javascript:;" @click="clickFollows(user.userId)">
                <strong>{{ user.follows }}</strong>
                <span>关注</span>
              </a>
            </li>
            <li class="user-info-item">
              <a href="javascript:;" @click="clickFans(user.userId)">
                <strong>{{ user.followeds }}</strong>
                <span>粉丝</span>
              </a>
            </li>
          </ul>
        </div>
        <div class="ard-relative-box" v-if="showFollows">
          <h2 class="ard-relative-hd">我的关注</h2>
          <ul class="ard-fans clearfix">
            <li
              class="ard-fans-item"
              v-for="item in follows"
              :key="item.userId"
            >
              <a
                class="ard-artist-pic"
                href="javascript:;"
                :title="item.nickname"
                @click="clickUser(item.userId)"
              >
                <img :src="item.avatarUrl" :alt="item.nickname" />
              </a>
              <h4 class="ard-fans-name">
                <a
                  class="ard-fans-txt"
                  href="javascript:;"
                  :title="item.nickname"
                  @click="clickUser(item.userId)"
                >
                  {{ item.nickname }}</a
                >
              </h4>
            </li>
          </ul>
        </div>
        <div class="ard-relative-box" v-if="showFans">
          <h2 class="ard-relative-hd">我的粉丝</h2>
          <ul class="ard-fans clearfix">
            <li class="ard-fans-item" v-for="item in fans" :key="item.userId">
              <a
                class="ard-artist-pic"
                href="javascript:;"
                :title="item.nickname"
                @click="clickUser(item.userId)"
              >
                <img :src="item.avatarUrl" :alt="item.nickname" />
              </a>
              <h4 class="ard-fans-name">
                <a
                  class="ard-fans-txt"
                  href="javascript:;"
                  :title="item.nickname"
                  @click="clickUser(item.userId)"
                >
                  {{ item.nickname }}</a
                >
              </h4>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="not-logged" v-if="!isLogin">
      <span class="not-gif">
        <img :src="notLogged" alt="乾心寿" />
      </span>
      <span class="not-content">登录后才可查看</span>
    </div>
  </div>
</template>

<script>
import Event from "components/event/Event";
import notLogged from "assets/images/notLogged.gif";

export default {
  components: {
    Event,
  },
  data() {
    return {
      notLogged: notLogged,
      isLogin: true,
      id: "",
      user: {},
      showSignature: false,
      lasttime: "",
      event: [],
      more: true,
      loading: false,
      // 标记，防止连续加载
      timer: null,
      follows: [],
      showFollows: false,
      fans: [],
      showFans: false,
    };
  },
  mounted() {
    let that = this;
    this.getLoginStatus();
    document.addEventListener("scroll", that.scrollLoad);
  },
  beforeDestroy() {
    let that = this;
    document.removeEventListener("scroll", that.scrollLoad);
  },
  methods: {
    reloadEvent() {
      this.event = [];
      this.lasttime = "";
      this.getEvent();
    },
    editEvent() {
      this.$store.commit("changeShowShare", true);
    },
    scrollLoad() {
      // console.log(this.scrollLoad);
      let topHeight =
        document.documentElement.scrollTop ||
        window.pageYOffset ||
        document.body.scrollTop;
      //documentHeight 为文档流的高度
      let documentHeight = document.documentElement.clientHeight;
      //bodyHeight 窗口的可视高度
      let bodyHeight = document.body.clientHeight;
      if (bodyHeight - topHeight - 300 < documentHeight && this.more) {
        if (!this.timer) {
          this.loading = true;
          this.timer = setTimeout(() => {
            this.getEvent();
          }, 1000);
        }
      }
    },
    clickUser(id) {
      this.playUserDetail(id);
    },
    clickEvent(id) {
      this.playUserEvent(id);
    },
    clickFollows(id) {
      this.playUserFollows(id);
    },
    clickFans(id) {
      this.playUserFans(id);
    },
    getUserFans() {
      this.axios({
        /* 歌手详情接口 */
        url: "/user/followeds?limit=8&uid=" + this.id,
      })
        .then((res) => {
          this.fans = res.data.followeds;
          // console.log(this.fans);
          if (this.fans.length > 0) {
            this.showFans = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getUserFollows() {
      this.axios({
        /* 歌手详情接口 */
        url: "/user/follows?limit=8&uid=" + this.id,
      })
        .then((res) => {
          this.follows = res.data.follow;
          // console.log(this.follows);
          if (this.follows.length > 0) {
            this.showFollows = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getEvent() {
      this.axios({
        url: "/event?timerstamp=" + Date.now() + "&lasttime=" + this.lasttime,
      })
        .then((res) => {
          this.lasttime = res.data.lasttime;
          this.event.push(...res.data.event);
          this.more = res.data.more;
          this.loading = false;
          this.timer = null;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getUserDetail() {
      this.axios({
        url: "/user/detail?uid=" + this.id,
      })
        .then((res) => {
          this.user = res.data.profile;
          console.log(this.user);
          if (res.data.profile.signature != "No introduction") {
            this.showSignature = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getLoginStatus() {
      // 获取登录状态
      this.axios({
        url: "/login/status?timerstamp=" + Date.now(),
      })
        .then((res) => {
          console.log(res.data);
          if (res.data.data.profile) {
            // 已登录
            // console.log("已登录");
            this.$store.commit("changeIsLogin", true);
            this.$store.commit("changeProfile", res.data.data.profile);
            this.isLogin = true;
            this.id = res.data.data.profile.userId;
            console.log(this.id);
            this.getUserDetail();
            this.getEvent();
            this.getUserFollows();
            this.getUserFans();
          } else {
            // 未登录
            // console.log("未登录");
            this.$store.state.isLogin = false;
            this.isLogin = false;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
.mod-fri {
  background-color: var(--color-theme-light-5);
}
.mod-fri-l {
  position: relative;
  float: left;
  width: 850px;
}
.mod-fri-l-hd {
  position: relative;
  height: 50px;
  line-height: 50px;
  border-bottom: 2px solid var(--color-theme);
}
.mod-fri-l-txt {
  float: left;
  margin-left: 20px;
  font-weight: 400;
}
.mod-fri-share {
  display: inline-block;
  padding: 0 10px;
  position: absolute;
  top: 10px;
  right: 20px;
  height: 30px;
  line-height: 30px;
  border: 1px solid var(--color-theme);
  border-radius: 15px;
  cursor: pointer;
}
.mod-fri-share .iconfont {
  color: var(--color-theme);
}
.mod-fri-share:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.mod-fri-infinite-list-item {
  padding: 20px 0;
  border-bottom: 1px solid #999;
}
.event-loading-box {
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.event-loading {
  height: 20px;
  line-height: 20px;
  font-size: 16px;
}

.event-loading .iconfont {
  animation: loading 2s linear infinite;
  display: inline-block;
  font-size: 20px;
}
@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* user-event-main-box-right */
.mod-fri .mod-fri-r {
  float: right;
  margin-top: 20px;
  width: 300px;
}
.mod-fri-pro {
  position: relative;
  margin-bottom: 20px;
  padding: 20px;
  width: 300px;
  height: 190px;
  background-color: var(--color-theme-light-4);
  border-radius: 10px;
}
.mod-fri-pro-hd {
  width: 100%;
  height: 80px;
  overflow: hidden;
}
.mod-fri-pro-hd-left {
  float: left;
  height: 80px;
  width: 80px;
}
.mod-fri-pro-hd-left a {
  display: block;
  width: 80px;
  height: 80px;
}
.mod-fri-pro-hd-left img {
  width: 80px;
  height: 80px;
}
.mod-fri-pro-hd-main {
  margin-left: 90px;
  height: 80px;
  line-height: 24px;
  font-size: 12px;
}
.mod-fri-pro-hd-name {
  line-height: 30px;
  font-size: 16px;
}
.mod-fri-pro-hd-name a:hover {
  text-decoration: underline;
}
.mod-fri-pro-hd-sign {
  color: #999;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.mod-fri .user-info {
  margin: 20px 0;
  width: 100%;
  height: 50px;
}
.mod-fri .user-info-item {
  float: left;
  padding: 0 10px;
  min-width: 80px;
  height: 50px;
  text-align: center;
  border-right: 1px solid #999;
}
.mod-fri .user-info-item a {
  display: inline-block;
  position: relative;
  color: #666;
}
.mod-fri .user-info-item:hover a {
  color: var(--color-theme);
}
.mod-fri .user-info-item strong {
  display: block;
  font-size: 24px;
  cursor: pointer;
}
.mod-fri .user-info-item span {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  cursor: pointer;
}
.ard-relative-box {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.ard-relative-hd {
  margin-bottom: 10px;
  font-weight: 400;
  height: 36px;
  line-height: 36px;
}
.ard-fans {
  width: 100%;
  margin-bottom: 20px;
}
.ard-fans-item {
  float: left;
  width: 65px;
  margin-right: 10px;
  margin-bottom: 15px;
}
.ard-fans-pic {
  display: block;
  width: 65px;
  height: 65px;
}
.ard-fans-item img {
  width: 65px;
  height: 65px;
}
.ard-fans-name {
  font-weight: 400;
  font-size: 13px;
  width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ard-fans-txt {
  color: #999;
}
.ard-fans-txt:hover {
  color: var(--color-theme);
}
/* not-logged */
.mod-fri .not-logged {
  position: relative;
  width: 1200px;
  height: calc(100vh - 90px);
  margin: 0 auto;
  overflow: hidden;
}
.mod-fri .not-logged span {
  position: absolute;
  top: 200px;
  left: 50%;
  transform: translateX(-50%);
}
.mod-fri .not-logged .not-content {
  top: 520px;
  text-align: center;
}
</style>